<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浙政钉 - 环境监管移动端</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1890ff',
                        'gov-blue': '#2563eb',
                        'gov-green': '#059669',
                        'gov-red': '#dc2626'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    <!-- 顶部状态栏 -->
    <div class="status-bar bg-white shadow-sm">
        <div class="flex justify-between items-center px-5 py-2 text-sm">
            <div class="flex items-center space-x-2">
                <i class="fas fa-signal text-gray-600"></i>
                <span class="text-gray-600">中国联通</span>
            </div>
            <div class="flex items-center space-x-1">
                <span class="text-gray-900 font-medium">10:30</span>
            </div>
            <div class="flex items-center space-x-2">
                <i class="fas fa-wifi text-gray-600"></i>
                <i class="fas fa-battery-three-quarters text-gray-600"></i>
                <span class="text-gray-600">85%</span>
            </div>
        </div>
    </div>

    <!-- 应用头部 -->
    <header class="bg-gov-blue text-white shadow-lg" style="margin-top: 30px;">
        <div class="flex items-center justify-between px-4 py-3">
            <div class="flex items-center space-x-3">
                <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
                    <i class="fas fa-leaf text-gov-blue text-lg"></i>
                </div>
                <div>
                    <h1 class="text-lg font-bold">浙政钉</h1>
                    <p class="text-xs text-blue-100">环境监管移动端</p>
                </div>
            </div>
            <div class="flex items-center space-x-3">
                <i class="fas fa-bell text-white cursor-pointer"></i>
                <i class="fas fa-user-circle text-white text-xl cursor-pointer"></i>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="flex-1 relative" style="margin-top: 24px; margin-bottom: 60px;">
        <iframe 
            id="main-frame" 
            src="home.html" 
            class="w-full h-full border-0"
            style="height: calc(100vh - 140px);">
        </iframe>
    </main>

    <!-- 底部导航栏 -->
    <nav class="bottom-nav bg-white border-t border-gray-200 shadow-lg">
        <div class="flex justify-around items-center py-2">
            <a href="#" onclick="loadPage('home.html')" class="nav-item active" data-page="home">
                <i class="fas fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </a>
            <a href="#" onclick="loadPage('pollution-monitor.html')" class="nav-item" data-page="monitor">
                <i class="fas fa-industry text-xl mb-1"></i>
                <span class="text-xs">监控</span>
            </a>
            <a href="#" onclick="loadPage('air-quality.html')" class="nav-item" data-page="air">
                <i class="fas fa-wind text-xl mb-1"></i>
                <span class="text-xs">空气</span>
            </a>
            <a href="#" onclick="loadPage('water-quality.html')" class="nav-item" data-page="water">
                <i class="fas fa-tint text-xl mb-1"></i>
                <span class="text-xs">水质</span>
            </a>
            <a href="#" onclick="loadPage('emergency-dispatch.html')" class="nav-item" data-page="emergency">
                <i class="fas fa-headset text-xl mb-1"></i>
                <span class="text-xs">应急</span>
            </a>
        </div>
    </nav>

    <script>
        function loadPage(page) {
            document.getElementById('main-frame').src = page;
            
            // 更新导航栏活动状态
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            
            const pageMap = {
                'home.html': 'home',
                'pollution-monitor.html': 'monitor',
                'air-quality.html': 'air',
                'water-quality.html': 'water',
                'emergency-dispatch.html': 'emergency'
            };
            
            const activeNav = document.querySelector(`[data-page="${pageMap[page]}"]`);
            if (activeNav) {
                activeNav.classList.add('active');
            }
        }

        // 处理iframe消息传递，用于模块间跳转
        window.addEventListener('message', function(event) {
            if (event.data.type === 'navigate') {
                loadPage(event.data.page);
            }
        });
    </script>
</body>
</html>